<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>宜鲜生</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<!-- load css -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css?v=v3.3.7" media="all">
<link rel="stylesheet" type="text/css" href="../css/font/iconfont.css?v=1.0.0" media="all">
<link rel="stylesheet" type="text/css" href="../css/layui.css?v=1.0.9" media="all">
<link rel="stylesheet" type="text/css" href="../css/main.css?v1.3.4" media="all">

<body>
<div class="container-fluid larry-wrapper">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <!--头部搜索-->
            <section class="panel panel-padding">
                <form class="layui-form" action="/education/admin/question/stats">
                    <div class="layui-form">
                        <div class="layui-inline">
                            <input class="layui-input" name="_query.beginDate" placeholder="起始时间"
                                   onclick="layui.laydate({elem: this, max: laydate.now()})">
                        </div>
                        <span style="margin-left: 10px;margin-right: 10px">至</span>
                        <div class="layui-inline">
                            <input class="layui-input" name="_query.endDate" placeholder="结束时间"
                                   onclick="layui.laydate({elem: this, max:laydate.now()})">
                        </div>
                        <div class="layui-inline">
                            <button lay-submit class="layui-btn" lay-filter="search">查找</button>
                        </div>
                    </div>
                </form>
            </section>

            <!--列表-->
            <section class="panel panel-padding">

                <div id="list" class="layui-form"></div>

                <div class="text-right" id="page"></div>
            </section>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-2">
            <section class="panel">
                <div class="symbol bgcolor-yellow-green"> <i class="iconfont">&#xe6a1;</i>
                </div>
                <div class="value tab-menu">
                    <a href="javascript:;" data-url="" data-parent="true" data-title="已回复（条）">
                        <i class="iconfont " data-icon='&#xe674;'></i>
                        <h1 id="yNum">0</h1>
                    </a>

                    <a href="javascript:;" data-url="" data-parent="true" data-title="已回复（条）">
                        <i class="iconfont " data-icon='&#xe674;'></i><span>已回复（条）</span>
                    </a>
                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-2">
            <section class="panel">
                <div class="symbol bgcolor-orange"> <i class="iconfont">&#xe62f;</i>
                </div>
                <div class="value tab-menu">
                    <a href="javascript:;" data-url="" data-parent="true" data-title="待回复（条）">
                        <h1 id="wNum"></h1>
                    </a>
                    <a href="javascript:;" data-url="" data-parent="true" data-title="待回复（条）">
                        <span>待回复（条）</span>
                    </a>
                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-2">
            <section class="panel">
                <div class="symbol bgcolor-yellow"> <i class="layui-icon">&#xe62c;</i>
                </div>
                <div class="value tab-menu">
                    <a href="javascript:;" data-url="" data-parent="true" data-title="完成进度">
                        <h1 id="jNum">0</h1>
                    </a>
                    <a href="javascript:;" data-url="" data-parent="true" data-title="完成进度">
                        <span>完成进度</span>
                    </a>
                </div>
            </section>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-md-6">
            <section class="panel">
                <div class="panel-heading">
                    咨询统计
                    <a href="javascript:;" class="pull-right panel-toggle"><i class="iconfont">&#xe604;</i></a>
                </div>
                <div class="panel-body">
                    <div class="echarts" id="platform"></div>
                </div>
            </section>
        </div>

    </div>
</div>
</body>
<script src="../js/layui/layui.js"></script>
<script type="text/javascript" src="../js/lib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/lib/rest.js"></script>
<!--#include file="common/version.html"-->
<script>
    layui.use(['jquery','echarts', 'element', 'laydate', 'form'], function(exports) {
        var echarts = layui.echarts, form = layui.form(),
                $ = layui.jquery;
        var element = layui.element();

        var _render = function(data){
            var myChart = echarts.init(document.getElementById('platform'));

            var f = data.finishNum;
            var u = data.waitNum;
            $('#yNum').text(f);
            $('#wNum').text(u);
            $('#jNum').text((f+u) == 0 ? '0%' : (100 * f/(u+f)).toFixed(2) + '%');
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '咨询统计',
                    subtext: '已回复：' + data.finishNum + "条；待回复：" + data.waitNum + '条；完成进度：' + data.finishRate,
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['已回复', '待回复']
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: data.waitNum, name: '已回复' },
                        { value: data.finishNum, name: '待回复' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        };

        var _refresh = function(data){
            restPost('/education/admin/question/stats', data, function(rs){console.log(rs)
                if(rs.status == 200){
                    _render(rs.data);
//                var p = rs.data.totalNum && (rs.data.fileNum)/(rs.data.totalNum);p.toFixed(2)
                    element.progress('demo', rs.data.finishRate);
                }
            });
        };

        form.on('submit(search)', function(data){
            _refresh(data.field);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        _refresh();

    });
</script>

</html>